<template>
    <div class="personal">
        <div class="header">
            <div class="user">
                <img class="avatar" src="@/assets/avatar.png" alt="">
                <div>立即登录</div>
            </div>
        </div>
        <div class="order">
            <div>
                <img src="@/assets/movie-order.png" alt="">
                <div class="title">电影订单</div>
            </div>
            <div>
                <img src="@/assets/goods-order.png" alt="">
                <div class="title">商品订单</div>
            </div>
        </div>
        <div class="item">
            <img src="@/assets/maizuo.png" alt="">
            <span>卖座劵</span>
            <span class="jiantou">></span>
        </div>
        <div class="item">
            <img src="@/assets/hongbao.png" alt="">
            <span>组合红包</span>
            <span class="jiantou">></span>
        </div>
        <div class="item">
            <img src="@/assets/money.png" alt="">
            <span>余额</span>
            <span class="jiantou">></span>
        </div>
        <div class="item">
            <img src="@/assets/set.png" alt="">
            <span>设置</span>
            <span class="jiantou">></span>
        </div>
    </div>
</template>

<script>
export default {
    name:'Personal'
}
</script>

<style scoped>
.personal{
    background-color: #eee;
}
.header{
    width: 100%;
    height: 50vw;
    background:url('https://assets.maizuo.com/h5/v5/public/app/img/bg.a5bdd690.png') no-repeat;
    background-size:100% 50vw;
}
.user{
    padding:17vw 10vw;
    display: flex;
}
.avatar{
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
    margin-right: 8vw;
}
.user div{
    color: white;
    line-height: 20vw;
}
.order{
    display: flex;
    padding: 4vw 0;
    background-color: white;
    margin-bottom: 5vw;
}
.order div{
    width: 50%;
    text-align: center;
}
.order div img{
    width: 10vw;
}
.order .title{
    width: 50vw;
    font-size: 4vw;
    color: #666;
}
.item{
    background-color: white;
    padding:4vw 10vw 2vw;
    border-bottom: 1px solid #eee;
    position: relative;
    font-size: 5vw;
}
.item img{
    width: 6vw;
    margin-right: 4vw;
}
.item span{
    position: absolute;
}
.item .jiantou{
    color: rgb(161, 161, 161);
    right: 4vw;
    top: 5vw;
}
</style>